<template>
    <div class="table">
      <el-row>
        <el-table
          :data="tableData"
          border
          :row-class-name="tableRowClassName"
          style="width: 100%">
          <el-table-column
           type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            sortable
            prop="date"
            label="创建日期"
            width="155">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="资源信息"> -->
            <el-table-column
             
              prop="name"
              label="名称"
              width="120">
            </el-table-column>
            <!-- <el-table-column label="路径"> -->
              <el-table-column
                prop="province"
                label="订单号"
                width="120">
              </el-table-column>
            <el-table-column
                prop="zip"
                label="提现金额"
                width="120">
              </el-table-column>
            <el-table-column
                prop="zip"
                label="提现类型"
                width="120">
              </el-table-column>
            <el-table-column
                prop="zip"
                label="总佣金"
                width="120">
              </el-table-column>
            <el-table-column
                prop="zip"
                label="绑定银行卡"
                width="120">
              </el-table-column>
            <el-table-column
                prop="zip"
                label="提现方式"
                width="120">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="待定"
                width="120">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="待定"
                width="120">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="待定"
                width="120">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="待定"
                width="120">
              </el-table-column>
                <el-table-column label="操作" width="190" fixed="right">
                  <template slot-scope="scope">
                    <el-button
                    icon="el-icon-edit"
                    style="background: #399bff;
                    border-color: #399bff;
                    color: #fff;"
                      size="mini"
                      >编辑</el-button>
                    <el-button
                    icon="el-icon-delete"
                      size="mini"
                      type="danger"
                      >删除</el-button>
                  </template>
                </el-table-column>
            <!-- </el-table-column> -->
          <!-- </el-table-column> -->
        </el-table>
            <div class="block">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
              </el-pagination>
            </div>
      </el-row> 
    </div>
</template>

<script>

export default {
    data() {
        return {
          currentPage1: 5,
          currentPage2: 5,
          currentPage3: 5,
          currentPage4: 4,
          tableData: [{
            date: '2016-05-02',
            name: '1',
            address: '萨博坦星球与地球'
          }, {
            date: '2016-05-04',
            name: '2',
            address: '萨博坦星球与地球'
          }, {
            date: '2016-05-01',
            name: '3',
            address: '萨博坦星球与地球'
          }, {
            date: '2016-05-03',
            name: '4',
            address: '萨博坦星球与地球'
          },
          {
            date: '2016-05-02',
            name: '5',
            address: '萨博坦星球与地球',
            tag: '家'
          }, {
            date: '2016-05-04',
            name: '6',
            address: '萨博坦星球与地球',
            tag: '公司'
          }, {
            date: '2016-05-01',
            name: '7',
            address: '萨博坦星球与地球',
            tag: '家'
          }, {
            date: '2016-05-03',
            name: '8',
            address: '萨博坦星球与地球',
            tag: '公司'
          }]
        }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
}
</script>
<style lang="scss" scope>

  .table {
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  }
</style>>